<template>
  <view class="wrap">
    <uv-overlay :show="show" zIndex='10' @click="show = false"></uv-overlay>
    <view class="tab">
      <view class="box">
        <view class="left" :class="{ height: show }">
          <view class="absolute">
            <view class="title">分类筛选</view>
            <view class="base">
              <scroll-view :scroll-y="show" :scroll-top='scrollTop' class="scroll" scroll-with-animation @scroll="scroll">
                <view class="list">
                  <view class="item" :class="{ active: !tag_id }" @click="tagClick('')">全部</view>
                  <view class="item" :class="{ active: item.id == tag_id }" v-for="(item, index) in typeList" :key="index" @click="tagClick(item)">{{ item.name }}</view>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
        <view class="right" :class="{ rotate: show }" @click="open"><uv-icon name="arrow-up" color="#999999" size="28rpx"></uv-icon></view>
      </view>
    </view>
    <view style="width: 100%;height: 20rpx;"></view>
    <uv-line color="#F5F5F5"></uv-line>
    <view class="body">
      <view class="list">
        <high v-for="(item, index) in list" :key="index" :detail='item'></high>
      </view>
      <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    </view>
  </view>
</template>

<script setup>
import high from '../../components/search/high.vue';
import { ref, onMounted } from 'vue';
import { deepArr } from '@/common';
import { post } from '@/api';

let show = ref(false);
let scrollTop = ref(0);
let copeTypeList = ref([]);
let typeList = ref([]);
let tag_id = ref('');
let list = ref([]);
let total = 0;
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onMounted(() => {
  getTypeList();
})

function getTypeList(){
  post('api/association/getAssociationTagList').then(res => {
    if(res.code == 1){
      const data = res.data;
      copeTypeList.value = deepArr(data);
      typeList.value = data;
      getList()
    }
  })
}
function getList(){
  const params = {
    page,
    limit,
    better: 1,
  }
  if(tag_id.value) params.tag_id = tag_id.value;
  post('api/association/getAssociationList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      total = data.total;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function scroll(e){
  scrollTop.value = e.detail.scrollTop
}
function open(){
  scrollTop.value = 0;
  setTimeout(() => {
    show.value = !show.value;
  }, 100)
}
function tagClick(row){
  // if(typeof row == 'object'){
    tag_id.value = row.id;
  //   let tem = deepArr(typeList.value).filter(o => o.id !== row.id);
  //   typeList.value = [row, ...tem];
  // }else{
  //   typeList.value = deepArr(copeTypeList.value);
  //   tag_id.value = '';
  // }
  if(show.value){
    open();
  }
  page = 1;
  list.value = [];
  getList();
}
</script>

<style lang="scss" scoped>
  .body{
    padding: 0 30rpx;
    .list{
      padding-top: 40rpx;
    }
  }
  .tab{
    padding: 0 30rpx;
    position: relative;
    z-index: 11;
    background-color: #fff;
    .box{
      width: 100%;
      display: flex;
      .left{
        flex: 1;
        width: 0;
        position: relative;
        transition: all .5s;
        height: 60rpx;
        &.height{
          height: 380rpx;
          .absolute{
            top: 0;
            .base{
              max-height: 320rpx;
            }
          }
        }
        .absolute{
          width: 100%;
          position: absolute;
          left: 0;
          top: -60rpx;
          transition: all .5s;
          .base{
            padding-top: 20rpx;
            max-height: 80rpx;
            overflow: hidden;
            transition: all .5s;
            .scroll{
              max-height: 300rpx;
            }
            .list{
              width: 100%;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              .item{
                font-size: 28rpx;
                color: #2B2B2B;
                line-height: 60rpx;
                height: 60rpx;
                border-radius: 10rpx;
                background-color: #F5F5F5;
                padding: 0 10rpx;
                margin-right: 10rpx;
                margin-bottom: 10rpx;
                &.active{
                  background-color: #E43222;
                  color: #FFFFFF;
                }
              }
            }
          }
          .title{
            height: 40rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #2B2B2B;
          }
        }
      }
      .right{
        width: 40rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .5s;
        transform-origin: 50% 50%;
        transform: rotate(180deg);
        &.rotate{
          transform: rotate(0deg);
        }
      }
    }
  }
</style>